<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.0.3.js"></script>
    <style type="text/css">
        *{margin:0px; padding:0px;}
        body{background:url("images/bg.jpg");}
        #qq{width:600px;/*宽*/height:170px;/*高*/background:#fff;/*背景颜色*/
            margin:50px auto 30px; border-radius:5px;/*Html5 圆角*/}
        #qq p{font-size:12px; color:#666; font-family:"微软雅黑";
            line-height:45px; text-indent:20px;}
        #qq .message{width:560px; height:70px;margin:0px auto; outline:none;
            border:1px solid #ddd; /*粗细 风格 颜色*/}
        #qq .But{width:560px;height:35px;margin:15px auto 0px; position:relative;/*相对，参考对象*/}
        #qq .But img.bq{float:left;/*左浮动*/}
        #qq .But span.submit{width:80px;height:30px; background:#ff8140;					display:block; float:right;/*右浮动*/								line-height:30px;border-radius:5px;								cursor:pointer;/*手指*/color:#fff;font-size:12px;					text-align:center;font-family:"微软雅黑";}

        /*face begin*/
        #qq .But .face{width:390px; height:160px; background:#fff; padding:10px;
            border:1px solid #ddd; box-shadow:2px 2px 3px #666;
            position:absolute;/*绝对定位*/ top:21px; left:15px;
            display:none;/*隐藏*/}
        #qq .But .face ul li{width:22px;height:22px;
            list-style-type:none;/*去掉圆点*/ float:left;
            margin:2px; cursor:pointer;}

        /*msgCon begin*/
        .msgCon{width:600px;height:500px; margin:0px auto;display: none;}
        .msgCon .msgBox{ background:#fff;
            padding:10px; margin-top:20px;}
        .msgCon .msgBox dl{height:60px; border-bottom:1px dotted #ddd;}
        .msgCon .msgBox dl dt{width:50px; height:50px;float:left;}
        .msgCon .msgBox dl dt img{border-radius:25px;}
        .msgCon .msgBox dl dd{width:500px; height:50px;  line-height:50px;float:right; font-size:16px;font-family:"微软雅黑";}
        .msgCon .msgBox .msgTxt{font-size:12px; color:#666; line-height:25px;}
    </style>
</head>
<body>
<div id="qq">
    <p>有什么新鲜事想告诉大家?</p>
    <div class="message" contentEditable='true'></div>

    <div class="But">
        <img src="images/0.gif" class='bq'/>
        <span class='submit'>发表</span>
        <!--face begin-->
        <div class="face">
            <ul>
                <li><img src="images/0.gif" title="[织]" ></li>
                <li><img src="images/1.gif" title="神马]"></li>
                <li><img src="images/2.gif" title="[浮云]"></li>
                <li><img src="images/3.gif" title="[给力]"></li>
                <li><img src="images/4.gif" title="[围观]"></li>
                <li><img src="images/5.gif" title="[威武]"></li>
                <li><img src="images/6.gif" title="[熊猫]"></li>
                <li><img src="images/7.gif" title="[囧]"></li>
                <li><img src="images/8.gif" title="[互粉]"></li>
                <li><img src="images/9.gif" title="[礼物]"></li>
                <li><img src="images/10.gif" title="呵呵]"></li>
            </ul>
        </div>
        <!--face end-->
    </div>
</div>
<!--qq end-->
<div id="time1"></div>
<!--msgCon begin-->
<div class="msgCon">
<!--<div class="msgBox">-->
   <!--<dl>-->
       <!--<dt>-->
           <!--<img src="images/txt.jpg"  style="width:50px; height:50px;" width=>-->
       <!--</dt>-->
       <!--<dd>神马都是浮云</dd>-->
   <!--</dl>-->
    <!--<div class='msgTxt'></div>-->
<!--</div>-->



</div>

</body>
</html>
<script>
    $(function(){
        $('.submit').mouseover(function(){
            $(this).css('transform','scale(1.3)')
        })
        $('.submit').mouseout(function(){
            $(this).css('transform','scale(1)')
        })
        $('.bq').click(function(e){
            $('.face').slideDown()
            e.stopPropagation()
        })
        $(document).click(function(){
            $('.face').slideUp()
        })
        $('.face ul li').click(function(){
            $('.face ul li ').each(function(index){
                $('.message').html('<img src ="images/'+index+'.gif">')
            })
        })

        $('.submit').click(function(){
//            var a = $('.msgCon')
//            if($('.submit').click){
//                a++
//            }
            $('.msgCon').css('display','block')
            var txt = $('.message').html()
            if(txt == ''){
                $('.msgCon').css('display','none')
            }
            $(".msgCon").prepend("<div class='msgBox'><dl><dt><img src='images/txt.jpg' width='50' height='50'/></dt><dd>神马都是浮云</dd></dl><div class='msgTxt'>"+txt+"</div></div>");
            

        })
    })
</script>